<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 作品集详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        .gallery-item {
            position: relative;
            padding-bottom: 100%;
            overflow: hidden;
            border-radius: 4px;
        }
        .gallery-item img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .gallery-item.large {
            grid-column: span 2;
        }
        .tag-item {
            display: inline-block;
            padding: 4px 10px;
            background-color: #f3f4f6;
            border-radius: 16px;
            margin-right: 6px;
            margin-bottom: 6px;
            font-size: 12px;
        }
        .book-btn {
            width: 100%;
            padding: 14px;
            background-color: #3b82f6;
            color: white;
            border-radius: 8px;
            font-weight: 500;
            text-align: center;
            font-size: 16px;
        }
        .like-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .tab-item {
            padding: 12px 0;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            color: #6b7280;
            border-bottom: 2px solid transparent;
        }
        .tab-item.active {
            color: #3b82f6;
            border-bottom-color: #3b82f6;
        }
    </style>
</head>
<body>
    <!-- 状态栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 顶部图片 -->
        <div class="relative h-64">
            <img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-full object-cover">
            <div class="absolute top-0 left-0 right-0 flex items-center justify-between p-4">
                <a href="index.html" class="w-8 h-8 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
                    <i class="fas fa-arrow-left text-white"></i>
                </a>
                <div class="flex space-x-2">
                    <button class="w-8 h-8 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
                        <i class="fas fa-share-alt text-white"></i>
                    </button>
                    <button class="w-8 h-8 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
                        <i class="far fa-heart text-white"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 摄影师信息 -->
        <div class="bg-white p-4 relative">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-14 h-14 rounded-full object-cover border-2 border-white shadow-sm">
                    <div class="ml-3">
                        <div class="font-bold text-lg">Sarah摄影师</div>
                        <div class="text-xs text-gray-500 flex items-center">
                            <i class="fas fa-map-marker-alt mr-1"></i>
                            上海市
                            <span class="mx-1">·</span>
                            <i class="fas fa-camera mr-1"></i>
                            人像写真
                        </div>
                    </div>
                </div>
                <button class="bg-blue-50 text-blue-500 px-3 py-1 rounded-full text-xs font-medium">
                    <i class="fas fa-plus mr-1"></i>关注
                </button>
            </div>
            
            <div class="mt-3 flex items-center justify-between text-sm">
                <div class="flex items-center">
                    <div class="text-yellow-500 mr-1"><i class="fas fa-star"></i></div>
                    <div>4.9 <span class="text-gray-500">(128评价)</span></div>
                </div>
                <div class="text-gray-500">已完成约拍 156</div>
            </div>
            
            <div class="mt-3">
                <p class="text-sm text-gray-700 leading-relaxed">
                    专注于人像摄影5年，擅长日系、韩系风格写真，为您打造自然唯美的人像作品。提供专业的拍摄指导，让每位顾客都能轻松拍出满意的照片。
                </p>
            </div>
            
            <div class="mt-3 flex flex-wrap">
                <div class="tag-item">日系写真</div>
                <div class="tag-item">韩系写真</div>
                <div class="tag-item">私人定制</div>
                <div class="tag-item">室内棚拍</div>
                <div class="tag-item">外景拍摄</div>
            </div>
        </div>
        
        <!-- 选项卡 -->
        <div class="bg-white mt-3">
            <div class="flex border-b">
                <div class="tab-item active flex-1">作品集</div>
                <div class="tab-item flex-1">套餐</div>
                <div class="tab-item flex-1">评价</div>
            </div>
        </div>
        
        <!-- 作品集 -->
        <div class="bg-white p-4">
            <div class="gallery-grid">
                <div class="gallery-item large">
                    <img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="作品1">
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="作品2">
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="作品3">
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="作品4">
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1502323777036-f29e3972f5ea?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="作品5">
                </div>
                <div class="gallery-item large">
                    <img src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="作品6">
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1496440737103-cd596325d314?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="作品7">
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="作品8">
                </div>
            </div>
        </div>
        
        <!-- 套餐信息 -->
        <div class="bg-white mt-3 p-4 hidden">
            <div class="border rounded-lg p-4 mb-4">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="font-bold">日系写真基础套餐</h3>
                    <div class="text-red-500 font-medium">¥599</div>
                </div>
                <div class="text-sm text-gray-600 mb-3">
                    <p>2小时拍摄 + 10张精修 + 所有原片</p>
                    <p>提供化妆造型指导，不含服装道具</p>
                </div>
                <button class="text-blue-500 text-sm">查看详情 <i class="fas fa-chevron-right text-xs"></i></button>
            </div>
            
            <div class="border rounded-lg p-4 mb-4">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="font-bold">日系写真高级套餐</h3>
                    <div class="text-red-500 font-medium">¥899</div>
                </div>
                <div class="text-sm text-gray-600 mb-3">
                    <p>3小时拍摄 + 15张精修 + 所有原片</p>
                    <p>提供专业化妆造型，含2套服装道具</p>
                </div>
                <button class="text-blue-500 text-sm">查看详情 <i class="fas fa-chevron-right text-xs"></i></button>
            </div>
            
            <div class="border rounded-lg p-4">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="font-bold">私人定制套餐</h3>
                    <div class="text-red-500 font-medium">¥1299起</div>
                </div>
                <div class="text-sm text-gray-600 mb-3">
                    <p>4小时拍摄 + 20张精修 + 所有原片</p>
                    <p>提供专业化妆造型，含3套服装道具</p>
                    <p>赠送精美相册一本</p>
                </div>
                <button class="text-blue-500 text-sm">查看详情 <i class="fas fa-chevron-right text-xs"></i></button>
            </div>
        </div>
        
        <!-- 评价信息 -->
        <div class="bg-white mt-3 p-4 hidden">
            <div class="mb-4 pb-4 border-b">
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-8 h-8 rounded-full object-cover mr-2">
                    <div>
                        <div class="font-medium">Lisa</div>
                        <div class="text-xs text-gray-500">2023-05-20</div>
                    </div>
                </div>
                <div class="flex text-yellow-500 text-xs mb-2">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p class="text-sm text-gray-700">
                    摄影师非常专业，拍摄过程很轻松愉快，照片效果超出预期，非常满意！强烈推荐给需要拍写真的朋友们。
                </p>
                <div class="mt-2 flex space-x-2">
                    <img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded">
                    <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded">
                </div>
            </div>
            
            <div class="mb-4 pb-4 border-b">
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full object-cover mr-2">
                    <div>
                        <div class="font-medium">Emma</div>
                        <div class="text-xs text-gray-500">2023-05-15</div>
                    </div>
                </div>
                <div class="flex text-yellow-500 text-xs mb-2">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <p class="text-sm text-gray-700">
                    Sarah很有耐心，会给出很多拍摄建议，对于不太会摆姿势的我来说非常有帮助。照片风格很符合我的期望，修图也很自然。
                </p>
            </div>
            
            <div>
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-8 h-8 rounded-full object-cover mr-2">
                    <div>
                        <div class="font-medium">Michael</div>
                        <div class="text-xs text-gray-500">2023-05-10</div>
                    </div>
                </div>
                <div class="flex text-yellow-500 text-xs mb-2">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p class="text-sm text-gray-700">
                    给女朋友预约的生日写真，摄影师很专业，场地也很不错，女朋友非常喜欢最终的照片，谢谢Sarah！
                </p>
                <div class="mt-2 flex space-x-2">
                    <img src="https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded">
                </div>
            </div>
            
            <button class="w-full text-center text-blue-500 mt-4 py-2">
                查看全部评价 (128) <i class="fas fa-chevron-right text-xs"></i>
            </button>
        </div>
        
        <!-- 底部预约栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg flex items-center justify-between">
            <div>
                <div class="text-red-500 font-medium text-lg">¥599起</div>
                <div class="text-xs text-gray-500">可选多种套餐</div>
            </div>
            <div class="flex items-center">
                <button class="like-btn mr-3">
                    <i class="far fa-heart text-gray-500"></i>
                </button>
                <a href="booking-detail.html" class="book-btn">立即预约</a>
            </div>
        </div>
    </div>
    
    <script>
        // 加载状态栏
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 选项卡切换
            const tabItems = document.querySelectorAll('.tab-item');
            const contentSections = [
                document.querySelector('.gallery-grid').parentElement,
                document.querySelectorAll('.bg-white.mt-3.p-4')[0],
                document.querySelectorAll('.bg-white.mt-3.p-4')[1]
            ];
            
            tabItems.forEach((tab, index) => {
                tab.addEventListener('click', function() {
                    tabItems.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    contentSections.forEach((section, i) => {
                        if (i === index) {
                            section.classList.remove('hidden');
                        } else {
                            section.classList.add('hidden');
                        }
                    });
                });
            });
            
            // 收藏按钮
            const likeBtn = document.querySelector('.like-btn');
            likeBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far', 'text-gray-500');
                    icon.classList.add('fas', 'text-red-500');
                } else {
                    icon.classList.remove('fas', 'text-red-500');
                    icon.classList.add('far', 'text-gray-500');
                }
            });
        });
    </script>
</body>
</html> 